<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>皇家官方授权店</title>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="./css/login.css" />
    <link rel="stylesheet" href="./css/indextwo.css" />
    <link rel="stylesheet" href="./my-page/my-page.css" />
  </head>
  <style></style>
  <body>
    <div class="zhong">
      <div class="toop">
        <ul class="scc1">
          <li style="width: 150px"><a href="#">收藏波奇商城</a></li>
          <li><a href="#">城市</a></li>
        </ul>
        <ul class="scc2">
          <li>
            <a href="#">波奇首页</a>
            <div class="daf1"></div>
          </li>
          <li>
            <a href="#">关于波奇</a><span class="sp1">|</span>
            <div class="daf1"></div>
          </li>
          <li>
            <a href="#">手机版</a><span class="sp1">|</span>
            <div class="daf1"></div>
          </li>
          <li style="text-indent: 20px">
            <a href="zuche.html">注册</a><span class="sp1">|</span>
          </li>
          <li style="text-indent: 20px">
            <a href="login.html">登录</a><span class="sp1">|</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="box" style="background-color: #fff">
      <div class="box1">
        <a href="index.html"
          ><img src="../img/logo3.png" alt="log" class="im"
        /></a>
        <div class="enz">
          <p><input type="text" /><input type="button" value="搜索" /></p>
          <ul>
            <li style="width: 65px">热门搜索：</li>
            <a href="#"><li>主粮</li></a>
            <a href="#"><li>零食</li></a>
            <a href="#"><li>医疗</li></a>
            <a href="#"><li>保健</li></a>
            <a href="#"><li>猫砂</li></a>
            <a href="#" style="color: #ee5533"><li>日用</li></a>
            <a href="#"><li style="width: 65px">玩具美容</li></a>
          </ul>
        </div>
        <div class="enze"></div>
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="dao">
      <ul>
        <li class="dag" style="width: 200px">全部商品分类</li>
        <a href="#"><li>首页</li></a>
        <a href="#"><li>狗狗</li></a>
        <a href="#"><li>猫猫</li></a>
        <a href="#"><li>小宠</li></a>
        <a href="#"><li>水族</li></a>
        <a href="#"><li>全球购</li></a>
        <a href="#"><li>创意生活</li></a>
        <a href="#"><li>体验馆</li></a>
        <a href="#"><li style="float: right">购物车</li></a>
      </ul>
    </div>
    <!-- 导航栏灰色条条 -->
    <div class="hui">
      <div class="se">
        <span><a href="#">波奇商城</a></span
        ><span>&gt;</span><span><a href="#">品牌馆</a></span
        ><span>&gt;</span><span>皇家</span><span>&gt;</span>
      </div>
    </div>
    <!-- 商品简介 -->
    <div class="jian">
      <div class="jian1">
        <img src="../png/shopbrand_big_pic41547434092 (1).jpg" alt="" />
      </div>
      <div class="jian2">
        <div class="imgcc">
          <img src="../png/shopbrand_logo1431179820_thumb.jpg" alt="" />
        </div>
        <h2>皇家</h2>
        <p>
          <span></span>品牌官方授权&nbsp;&nbsp;<span style="color: #666"
            >123款在售</span
          >
        </p>

        <h2><a href="#">关注品牌</a></h2>
        <span>12342人关注</span>
        <h3 style="clear: both">品牌故事</h3>
        <p>
          始于1968年，是法国南部的一名兽医创立。总部位于法国南部艾玛格，隶属玛氏集团，是宠物健康营养领域领先的全球性公司之一。国产粮中的高端品牌，销量、知名度在国内市场占比都是极高的。根据犬猫的生理结构与进食特点为出发点，不同产品系列的颗粒形状、大小、质地都经过精心设计，只为呵护宠物健康。
        </p>
      </div>
    </div>
    <!-- 商品分类 -->
    <div class="quan">
      <ul>
        <li style="color: #ee5533">全部</li>
        <li>猫咪主粮</li>
        <li>猫咪零食</li>
        <li>生活日用</li>
        <li>狗狗主粮</li>
        <li>狗狗零食</li>
        <li>猫狗</li>
      </ul>
    </div>
    <div class="lie">
      <button>综合排序</button>
      <button>销量</button>
      <button class="asc-btn" onclick="descBtnClick()">价格降序</button>
      <button class="desc-btn" onclick="ascBtnClick()">价格升序</button>
      <button>新品</button>
      <input type="checkbox" />有货 <input type="checkbox" />促销
    </div>

    <!-- 商品列表 -->
    <div class="spin">
      <ul id="shangpin">
        <!-- <li>
              <h2></h2>
              <p></p>
              <img src="" alt="">
          </li>  -->
      </ul>
    </div>
    <div style="text-align: center">
      <div class="my-page"></div>
    </div>
    <!-- 底部1 -->
    <div class="hengf">
      <div class="hengfu">
        <div class="heng1">
          <div class="fu1"></div>
          <p>正品保障</p>
          <p>全场正品&nbsp;&nbsp;假一赔十</p>
        </div>
        <div class="heng2">
          <div class="fu2"></div>
          <p>闪电发货</p>
          <p>7省满59免运费</p>
        </div>
        <div class="heng3">
          <div class="fu3"></div>
          <p>无忧退换</p>
          <p>七天退换&nbsp;&nbsp;购买无忧</p>
        </div>
        <div class="heng4">
          <div class="fu4"></div>
          <p>优质服务</p>
          <p>品类丰富&nbsp;&nbsp;多快好省</p>
        </div>
        <div class="heng5" style="border-right: 0px">
          <div class="fu5"></div>
          <p>诚信电商</p>
          <p>宠友放心&nbsp;&nbsp;值得信赖</p>
        </div>
      </div>
    </div>
    <!-- 底部2 -->
    <div class="xin">
      <div class="shou">
        <div class="chou1">
          <h2>新手上路</h2>
          <a href="#"><p>购物流程</p></a>
          <a href="#"><p>现金账户</p></a>
          <a href="#"><p>优惠券</p></a>
          <a href="#"><p>订单查询</p></a>
          <a href="#"><p>服务协议</p></a>
        </div>
        <div class="chou1">
          <h2>购买方式</h2>
          <a href="#"><p>余额支付</p></a>
          <a href="#"><p>网上支付</p></a>
          <a href="#"><p>银行汇款</p></a>
          <a href="#"><p>货到付款</p></a>
        </div>
        <div class="chou1">
          <h2>配送方式</h2>
          <a href="#"><p>配送方式</p></a>
          <a href="#"><p>收费标准</p></a>
          <a href="#"><p>配送时间</p></a>
        </div>
        <div class="chou1">
          <h2>售后服务</h2>
          <a href="#"><p>如何退换货</p></a>
          <a href="#"><p>如何退款</p></a>
          <a href="#"><p>退换货流程</p></a>
          <a href="#"><p>客服电话</p></a>
        </div>
        <div class="chou5">
          <h2>常见问题</h2>
          <a href="#"><p>注册登录</p></a>
          <a href="#"><p>波奇豆</p></a>
          <a href="#"><p>热点问题</p></a>
        </div>
      </div>
    </div>
    <!-- 这里是底部 -->
    <div class="dib">
      <div class="dibu" style="clear: both">
        <ul>
          <li><a href="#">关于波奇</a><span>|</span></li>
          <li><a href="#">投资者关系</a><span>|</span></li>
          <li><a href="#">诚聘英才</a><span>|</span></li>
          <li><a href="#">联系我们</a><span>|</span></li>
          <li><a href="#">网站地图</a><span>|</span></li>
          <li><a href="#">意见反馈</a><span>|</span></li>
          <li><a href="#">帮助中心</a><span>|</span></li>
          <li style="width: 170px">客服热线：400-820-6098</li>
        </ul>
        <ul>
          <li><a href="#">沪公网安备 31011502004955号</a><span>|</span></li>
          <li><a href="#">沪ICP备13034501号-2</a><span>|</span></li>
          <li style="width: 160px">增值电信业务经营许可证：</li>
          <li style="width: 130px"><a href="#"> 沪B2-20140120</a></li>
        </ul>
        <p>
          Copyright © 2007- 2021 Boqii.com All Rights Reserved
          光橙（上海）信息科技有限公司 版权所有
        </p>
        <ul>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
        </ul>
        <p>
          违法和不良信息举报电话：<a href="#">021-68826169</a
          >&nbsp;|&nbsp;举报邮箱：<a href="#">zhengls@boqii.com</a>
        </p>
        <p>如网民接到962110电话，请立即接听</p>
      </div>
    </div>
    <!-- <div class="cheb"></div> -->
    <script>
      //出现

      /*   所有商品接口
            get
            参数
            pagesize  每页获取几个数据
            pagenum 获取第几页数据
            uid  用户id
            http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=20&pagenum=4 
       */
      let pagesize = 10;
      let pagenum = 0;
      // 用户id
      let id = localStorage.getItem("id");
      let token = localStorage.getItem("token");

      let productArr;

      laodList();
      //封装加载商品列表的函数---页面一开始需要加载商品列表   发布了商品列表的更新 加载商品列表
      function laodList() {
        let listAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
        axios
          .get(listAPI, { params: { pagesize, pagenum, uid: id } })
          .then((r) => {
            console.log(r.data);
            // 商品数组
            productArr = r.data.data;
            //根据商品数组-拼接字符串 给ul
            let str = "";
            productArr.forEach((pObj) => {
              str += `<li>
                <a href="item.html?id=${pObj.pid}">
                <img src="${pObj.pimg}" alt="">
                <p style="color:red">￥${pObj.pprice}</p>
                <h2>${pObj.pname}</h2>     
                <p>${pObj.pid}</p>     
                  </a>
                  </li>`;
            });
            document.querySelector("#shangpin").innerHTML = str;
          });
      }

      function ascBtnClick() {
        // productArr 元素排序 价格 降序
        productArr.sort((a, b) => a.pprice - b.pprice);
        // 根据 productArr 生成列表

        let str = "";
        productArr.forEach((pObj) => {
          str += `<li>
              <a href="item.html?id=${pObj.pid}">
              <h2>${pObj.pname}</h2>
              <p>${pObj.pprice}</p>
              <p>${pObj.pid}</p>
              <img src="${pObj.pimg}">
              </a>
              </li>`;
        });
        document.querySelector("#shangpin").innerHTML = str;
      }

      function descBtnClick() {
        //productArr 元素排序 价格 降序
        productArr.sort((a, b) => b.pprice - a.pprice);
        // 根据 productArr 生成列表

        let str = "";
        productArr.forEach((pObj) => {
          str += `<li>
              <a href="item.html?id=${pObj.pid}">
              <h2>${pObj.pname}</h2>
              <p>${pObj.pprice}</p>
              <p>${pObj.pid}</p>
              <img src="${pObj.pimg}">
              </a>
              </li>`;
        });
        document.querySelector("#shangpin").innerHTML = str;
      }
    </script>
    <script src="./my-page/my-page.js"></script>
    <script>
      myPageInit({
        pages: 100,
        currentPage: 1,
        element: ".my-page",
        callback: function (page) {
          console.log("当前页:", page);
        },
      });
    </script>
  </body>
</html>
